import Highcharts from "highcharts";

/**
 * 环行图配置
 * @param id  Dom的 id
 * @param data 数组
 */
export const huanxintu = (id, data) => {
    // 求和
    const totlaCount = data.reduce((prev,cur,index)=>{
        return prev + cur.y;
    },0)

    var chart = Highcharts.chart(id, {
        chart: {
            animation: false,
            panning: false, // 禁止放大
            pinchType: false, // 禁用手势操作
            spacing: [0, 0, 0, 0],
            style: {
                fontSize: '12px',
            }
        },
        colors: ["#ff4d4f", "#ffa940", "#7A90FF", "#9254de", "#73d13d"],
        title: {
            floating: true,
            text: `${totlaCount} 只`
        },
        credits: {enabled: false},
        accessibility: {
            enabled: false
        },
        tooltip: {
            enabled: false,
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            series: {
                allowPointSelect: true
            },
            pie: {
                allowPointSelect: false,
                showInLegend: false,
                dataLabels: {
                    enabled: false,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    },
                },
                point: {
                    events: {
                        mouseOver: function (e) {  // 鼠标滑过时动态更新标题
                            // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
                            chart.setTitle({
                                text: e.target.name + '\t' + e.target.y + ' 只'
                            });
                        },
                        click: function(e) { // 同样的可以在点击事件里处理
                            chart.setTitle({
                                text: e.point.name+ '\t'+ e.point.y + ' 只'
                            });
                        }
                    }
                },
            }
        },
        series: [
            {
                name: '市场份额',
                type: "pie",
                innerSize: "65%",
                borderWidth: 0,
                data: data
            }]
    },circle);
}

/**
 * 图表初始化完毕后的回调函数
 * @param c
 */
function circle (c) {
    // 环形图圆心
    var centerY = c.series[0].center[1],
        titleHeight = parseInt(c.title.styles.fontSize);
    // console.log('centerY',centerY)
    // console.log('titleHeight',titleHeight)
    // 动态设置标题位置
    c.setTitle({
        y:centerY + titleHeight/2
    });
}